<!--
 * @Descripttion: 会计科目->记账凭证->填制凭证
 * @version: V1.0
 * @Author: GaoWei
 * @Date: 2021-04-25 12:11:55
 * @LastEditors: GW
 * @LastEditTime: 2022-06-14 09:30:48
-->

<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="() => { showModel = 'list' }" v-show="showModel == 'order'">
                                <a-icon class="btns-icon" type="unordered-list" />
                                <div class="btns-text">列表</div>
                            </div>
                            <div class="btns" @click="() => { showModel = 'order' }" v-show="showModel == 'list'">
                                <a-icon class="btns-icon" type="container" />
                                <div class="btns-text">凭证</div>
                            </div>
                        </a-col>
                        <a-col :class="voucherState == 0 && !editMask ? '' : 'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl" v-if="permissions.includes('voucher:save')">

                            <!-- <a-dropdown class="btns" key="submit1" style="display:block">
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    <a-icon class="btns-icon" type="file-add" />
                                    <div class="btns-text">保存
                                        <a-icon type="down" style="color:#ccc;vertical-align:middle;" />
                                    </div>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item key="0" @click="voucherState==0 && !editMask?handlerSubmit():''">
                                        <a href="javascript:void(0)">
                                            <span>保存新增</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="1">
                                        <a href="javascript:void(0)">
                                            <span>保存为草稿</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="2">
                                        <a href="javascript:void(0)">
                                            <span>保存为常用凭证</span>
                                        </a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown> -->
                            <div class="btns" @click="voucherState == 0 && !editMask ? handlerSubmit() : ''">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl" v-if="permissions.includes('voucher:add')">
                            <a-dropdown class="btns" key="submit" style="display:block">
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    <a-icon class="btns-icon" type="file-add" />
                                    <div class="btns-text">新增
                                        <a-icon type="down" style="color:#ccc;vertical-align:middle;" />
                                    </div>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item key="0" @click="newPage">
                                        <a href="javascript:void(0)">
                                            <span>凭证</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="1" @click="choiceProof(1)">
                                        <a href="javascript:void(0)">
                                            <span>常用凭证</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="2" @click="choiceProof(2)">
                                        <a href="javascript:void(0)">
                                            <span>规则凭证</span>
                                        </a>
                                    </a-menu-item>
                                    <!-- <a-menu-item key="3">
                                        <a href="javascript:void(0)">
                                            <span>调整凭证</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="4">
                                        <a href="javascript:void(0)">
                                            <span>数量调整</span>
                                        </a>
                                    </a-menu-item> -->
                                </a-menu>
                            </a-dropdown>
                            <!-- <div class="btns" @click="newPage">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div> -->
                        </a-col>
                        <a-col :class="voucherState == 0 && currentId && editMask ? '' : 'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl" v-if="permissions.includes('voucher:edit')">
                            <div class="btns" @click="voucherState == 0 && currentId && editMask ? handleEdit() : ''">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>

                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl" v-if="permissions.includes('voucher:delete')">
                            <div :class="currentId && voucherState == 0 ? '' : 'btns-disable'">
                                <div class="btns" @click="currentId && voucherState == 0 ? handleRemove(1) : ''">
                                    <a-icon class="btns-icon" type="delete" />
                                    <div class="btns-text">删除</div>
                                </div>
                            </div>
                            <!-- <div :class="currentId && invalidState==1 && voucherState==0?'':'btns-disable'" v-show="invalidState == 1">
                                <div class="btns" @click="currentId && invalidState==1 && voucherState==0?handleRemove(0):''">
                                    <a-icon class="btns-icon" type="issues-close" />
                                    <div class="btns-text">恢复</div>
                                </div>
                            </div> -->
                        </a-col>

                        <a-col :class="(showModel == 'order' && currentId) || showModel == 'list' ? '' : 'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <a-dropdown class="btns" key="examie" style="display:block">
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    <a-icon class="btns-icon" type="audit" />
                                    <div class="btns-text">审核
                                        <a-icon type="down" style="color:#ccc;vertical-align:middle;" />
                                    </div>
                                </a>
                                <a-menu slot="overlay" v-if="showModel == 'list'">
                                    <a-menu-item key="0" @click="auditClickList(1)">
                                        <a href="javascript:void(0)">
                                            <span>审核</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="1" @click="auditClickList(0)">
                                        <a href="javascript:void(0)">
                                            <span>弃审</span>
                                        </a>
                                    </a-menu-item>
                                </a-menu>
                                <a-menu slot="overlay" v-else>
                                    <a-menu-item key="0" @click="currentId && voucherState == 0 ? auditClick(1) : ''">
                                        <a href="javascript:void(0)">
                                            <span>审核</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="1" @click="currentId && voucherState == 1 ? auditClick(0) : ''">
                                        <a href="javascript:void(0)">
                                            <span>弃审</span>
                                        </a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </a-col>

                        <a-col :class="showModel == 'order' && voucherState == 0 ? 'btns-disable' : ''" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <a-dropdown class="btns" key="jizhang" style="display:block">
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    <a-icon class="btns-icon" type="audit" />
                                    <div class="btns-text">记账
                                        <a-icon type="down" style="color:#ccc;vertical-align:middle;" />
                                    </div>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item key="0">
                                        <a href="javascript:void(0)" v-if="showModel == 'order'" @click="voucherState == 1 && currentId ? chargeClick() : ''">
                                            <span>记账</span>
                                        </a>
                                        <a href="javascript:void(0)" v-if="showModel == 'list'" @click="chargeClick('list')">
                                            <span>记账</span>
                                        </a>
                                    </a-menu-item>
                                    <a-menu-item key="1">
                                        <a href="javascript:void(0)" @click="showModel == 'list'?unChargeClick('list'):unChargeClick()">
                                            <span>取消记账</span>
                                        </a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div>
                                <div class="btns" @click="collate">
                                    <a-icon class="btns-icon" type="appstore" />
                                    <div class="btns-text">整理</div>
                                </div>
                            </div>
                            <!-- <div :class="currentId && invalidState==1 && voucherState==0?'':'btns-disable'" v-show="invalidState == 1">
                                <div class="btns" @click="currentId && invalidState==1 && voucherState==0?handleRemove(0):''">
                                    <a-icon class="btns-icon" type="issues-close" />
                                    <div class="btns-text">恢复</div>
                                </div>
                            </div> -->
                        </a-col>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl" :class="editMask == false ? '' : 'btns-disable'">
                            <div style="position:relative">
                                <div class="btns" @click="editMask ? '' : getDataNewPage(4)">
                                    <a-icon class="btns-icon" type="undo" />
                                    <div class="btns-text">撤销</div>
                                </div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;">
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div :class="showModel == 'order' ? '' : 'btns-disable'">
                                <div class="btns" @click="showModel == 'order' ? getDataNewPage(3) : ''">
                                    <a-icon class="btns-icon" type="vertical-right" />
                                    <div class="btns-text">首张</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div :class="showModel == 'order' ? '' : 'btns-disable'">
                                <div class="btns" @click="showModel == 'order' ? getDataNewPage(1) : ''">
                                    <a-icon class="btns-icon" type="left" />
                                    <div class="btns-text">上张</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div :class="showModel == 'order' ? '' : 'btns-disable'">
                                <div class="btns" @click="showModel == 'order' ? getDataNewPage(2) : ''">
                                    <a-icon class="btns-icon" type="right" />
                                    <div class="btns-text">下张</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div style="position:relative" :class="showModel == 'order' ? '' : 'btns-disable'">
                                <div class="btns" @click="showModel == 'order' ? getDataNewPage(4) : ''">
                                    <a-icon class="btns-icon" type="vertical-left" />
                                    <div class="btns-text">末张</div>
                                </div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;">
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div style="position:relative">
                                <div class="btns" @click="syncFun">
                                    <a-icon class="btns-icon" type="file-sync" />
                                    <div class="btns-text">刷新</div>
                                </div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;">
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col>

                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="credentials-wrapper">
                <h3 class="text-center">
                    <span class="text-name" v-show="showModel == 'list'">凭证列表</span>
                    <span class="text-name" v-show="showModel == 'order'">{{ currentTitle }}</span>
                </h3>

                <section v-show="showModel == 'list'">
                    <section class="credentials-search-warpper">
                        <div class="search-box">
                            <div class="filter" style="width:340px;">
                                <div class="filter-label">期间:</div>
                                <div class="filter-control">
                                    <a-select style="width:45%" placeholder="开始月份" v-model="searchData.beginPeriod" @change="((date, dateString) => { handlerMonth(date, dateString, 1) })">
                                        <a-select-option v-for="(item, index) in monthArray" :key="index" :value="item">
                                            {{ item }}
                                        </a-select-option>
                                    </a-select>-
                                    <a-select style="width:45%" placeholder="结束月份" v-model="searchData.endPeriod" @change="((date, dateString) => { handlerMonth(date, dateString, 2) })">
                                        <a-select-option v-for="(item, index) in monthArray" :key="index" :value="item">
                                            {{ item }}
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </div>
                            <div class="filter" style="width:340px;">
                                <div class="filter-label">业务日期:</div>
                                <div class="filter-control">
                                    <a-date-picker style="width:45%" v-model="searchData.beginBusinessDate" :format="'YYYY-MM-DD'" placeholder="请选择开始日期" @change="(e, v) => { searchData.beginBusinessDate = v; }" />-
                                    <a-date-picker style="width:45%" v-model="searchData.endBusinessDate" :format="'YYYY-MM-DD'" placeholder="请选择结束日期" @change="(e, v) => { searchData.endBusinessDate = v; }" />
                                </div>
                            </div>
                            <div class="filter" style="width:340px;">
                                <div class="filter-label">凭证号:</div>
                                <div class="filter-control">
                                    <a-input id="code" style="width:45%" max-length="4" v-model="searchData.beginCode" autocomplete="off" placeholder="请输入开始凭证号" />-
                                    <a-input id="code" style="width:45%" max-length="4" v-model="searchData.endCode" autocomplete="off" placeholder="请输入结束凭证号" />
                                </div>
                            </div>
                            <!-- <div class="filter">
                                <div class="filter-label">审核人:</div>
                                <div class="filter-control">
                                    <a-input @click="searchGroup('employees')" v-model="searchData.reviewerUserName" autocomplete="off" placeholder="请选择审核人" />
                                    <search-group-header ref="reviewerRef" :inputValue="searchData.reviewerUserName" :componentName="'employees'" @clickItem="searchBackData"></search-group-header>
                                </div>
                            </div> -->
                            <!-- <div class="filter">
                                <div class="filter-label">审核日期:</div>
                                <div class="filter-control">
                                    <a-date-picker v-model="searchData.reviewerDate" :format="'YYYY-MM-DD'" placeholder="请选择审核日期" @change="(e,v) => {searchData.reviewerDate=v;}" />
                                </div>
                            </div> -->
                            <div class="filter">
                                <div class="filter-label">凭证状态:</div>
                                <div class="filter-control">
                                    <a-select v-model="searchData.status">
                                        <a-select-option :value="null">
                                            全部
                                        </a-select-option>
                                        <a-select-option :value="0">
                                            未审核
                                        </a-select-option>
                                        <a-select-option :value="1">
                                            已审核
                                        </a-select-option>
                                        <a-select-option :value="3">
                                            已记账
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </div>
                            <!-- <div class="filter">
                                <div class="filter-label">制单日期:</div>
                                <div class="filter-control">
                                    <a-date-picker v-model="searchData.createDate" :format="'YYYY-MM-DD'" placeholder="请选择制单日期" @change="(e,v) => {searchData.createDate=v;}" />
                                </div>
                            </div> -->

                        </div>
                        <div style="position:absolute;right:0;top:0">
                            <a-button style="float:right" type="primary" @click="getDataList('search')" enter-button>
                                搜索
                            </a-button>
                        </div>
                    </section>
                    <div class="margin-top-10">
                        <a-table :columns="listColumns" :customRow="customClickList" :data-source="listDataSource" :row-selection="rowSelection" :pagination="pagination" :scroll="{ x: 500, y: 500 }" bordered>

                        </a-table>
                    </div>
                </section>

                <!-- <section v-show="showModel=='list'">
                    <a-row>
                        <a-col :span="4">
                            <a-input-search class="search-btn" v-model="searchText" placeholder="请输入凭证编号" ref="searchInput" @search="getDataList('search')" enter-button></a-input-search>
                        </a-col>
                    </a-row>
                    <div class="margin-top-10">
                        <a-table :columns="listColumns" :customRow="customClickList" :data-source="listDataSource" :pagination="pagination" :scroll="{x:500,y:500}" bordered>

                        </a-table>
                    </div>
                </section> -->
                <section style="position:relative" v-show="showModel == 'order'">
                    <!-- <div v-if="voucherState==1&&invalidState==1"><span class="audit-status" style="right:180px;">废除已审</span></div> -->
                    <div v-if="voucherState == 3"><span class="audit-status" style="right:10px;top:10px">已记账</span>
                    </div>
                    <div v-if="voucherState == 1 || voucherState == 3"><span class="audit-status" style="right:10px;top:-40px;">已审核</span></div>
                    <!-- <div v-else-if="invalidState==1"><span class="audit-status" style="right:180px;">废除</span></div> -->
                    <a-row>
                        <a-col :span="24">
                            <div class="date-tp">
                                <a-form-model :layout="formLayout">
                                    <div class="header-box" style="position:relative">
                                        <!-- 遮罩（点击修改关闭遮罩） -->
                                        <div class="edit-mask-route" v-show="editMask"></div>
                                        <div class="bills-box-header">
                                            <div class="filter">
                                                <div class="filter-label">账簿:</div>
                                                <div class="filter-control" style="line-height:30px;padding-left:10px;text-align: left;">
                                                    <!-- <a-input @input="inputNum" v-model.trim="dataJson.attachedData"></a-input> -->
                                                    {{ userInfo.companyName }}
                                                </div>
                                            </div>
                                            <div class="filter">
                                                <div class="filter-label"><span style="color:red">* </span>业务日期:</div>
                                                <div class="filter-control">
                                                    <a-date-picker v-model="dataJson.businessDate" format="YYYY-MM-DD" @change="onChangeBusinessDate" placeholder="请选择业务日期" />
                                                </div>
                                            </div>
                                            <div class="filter" style="width:350px">
                                                <div class="filter-label"><span style="color:red">* </span>凭证字:</div>
                                                <div class="filter-control">
                                                    <div class="clearfix">
                                                        <a-input read-only class="text-center" style="width:20%;float:left" @click="searchGroup('credentialsSearch')" v-model="dataJson.classWord" autocomplete="off" placeholder="请输入凭证编号">
                                                            <!-- <a-icon slot="addonAfter" type="ellipsis" />{{dataJson.code}} -->
                                                        </a-input>
                                                        <div style="width:10%;float:left">&nbsp;</div>
                                                        <a-input class="text-center" style="width:20%;float:left" maxLength="4" v-model="voucherCode" autocomplete="off">
                                                            <!-- <a-icon slot="addonAfter" type="ellipsis" />{{dataJson.code}} -->
                                                        </a-input>
                                                        <div style="width:10%;float:left;line-height:32px">号</div>
                                                        <div style="float:left;width:20%;line-height:32px">附件数</div>
                                                        <div style="float:left;width:20%;">
                                                            <a-input @input="dataJson.attachedData = dataJson.attachedData.replace(/[^\d]/g, '')" v-model.trim="dataJson.attachedData"></a-input>
                                                        </div>
                                                    </div>
                                                    <search-group-header ref="credentialsSearch" :inputValue="dataJson.code" :componentName="'category'" @clickItem="searchBackData"></search-group-header>
                                                </div>
                                            </div>
                                            <!-- <div class="filter">
                                                <div class="filter-label">附单据数:</div>
                                                <div class="filter-control">
                                                    <a-input @input="dataJson.attachedData=dataJson.attachedData.replace(/[^\d]/g,'')" v-model.trim="dataJson.attachedData"></a-input>
                                                </div>
                                            </div> -->
                                        </div>
                                        <!-- <a-row class="order-dynamic-form-wrapper">
                                            <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="凭证编号" :rules="[{ required: true, message:'',trigger:'input'}]">
                                                    <a-input read-only v-model="dataJson.code" @click="searchGroup()"></a-input>
                                                    <searchGroupHeader ref="credentialsSearch" :inputValue="dataJson.code" :componentName="'category'" @clickItem="searchBackData"></searchGroupHeader>
                                                </a-form-model-item>
                                            </a-col>

                                            <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="凭证类别" :rules="[{ required: true, message:'',trigger:'input'}]">
                                                    <a-input v-model="dataJson.vclassName" @click="searchGroup()" :style="styleProcess"></a-input>
                                                    <searchGroupHeader ref="credentialsSearch" :inputValue="dataJson.vclassName" :componentName="'category'" @clickItem="searchBackData"></searchGroupHeader>
                                                </a-form-model-item>
                                            </a-col>
                                            <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="业务日期">
                                                    <a-date-picker v-model="dataJson.businessDate" format="YYYY-MM-DD" @change="onChangeBusinessDate" />
                                                </a-form-model-item>
                                            </a-col>
                                            <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="附单据数">
                                                    <a-input v-model="dataJson.attachedData"></a-input>
                                                </a-form-model-item>
                                            </a-col>
                                        </a-row> -->
                                    </div>
                                </a-form-model>
                            </div>
                            <div class="table-box">
                                <a-table id="credentials_tb" class="atable-edit" :columns="columns" :customRow="customClick" :data-source="dataSource" :pagination="false" :scroll="{ x: 600, y: 500 }" bordered>
                                    <template v-for="item in editColumnArraya" :slot="item" slot-scope="text, record ,index">
                                        <div>
                                            <editable-cell v-if="isRouterAlive" :record="record" :col="item" :text="text" :dataSource="dataSource" @showModalAuxiliary="showModalAuxiliary" @change="onCellChange(index, item, $event)" />
                                        </div>
                                    </template>
                                </a-table>
                                <div class="total-box-creadentials">
                                    <div class="total-title">
                                        合计
                                    </div>
                                    <div v-if="totalDebitAmount > 0" style="padding-right:2px;" class="total-borrow">
                                        借方金额：{{ totalDebitAmount | NumFormat }}
                                    </div>
                                    <div v-else style="padding-right:2px;color:#444" class="total-borrow">
                                        借方金额：{{ totalDebitAmount | NumFormat }}
                                    </div>
                                    <div v-if="totalCreditAmount > 0" style="padding-right:2px;" class="total-loan">
                                        贷方金额：{{ totalCreditAmount | NumFormat }}
                                    </div>
                                    <div v-else style="padding-right:2px;color:#444" class="total-loan">
                                        贷方金额：{{ totalCreditAmount | NumFormat }}
                                    </div>
                                </div>
                                <div class="footer-tp-c">
                                    <a-row>
                                        <a-col :span="8">记账：{{ dataJson.bookkeeperName }}</a-col>
                                        <!-- <a-col :span="5">记账日期：{{dataJson.bookDate}}</a-col> -->
                                        <a-col :span="8">审核：{{ dataJson.reviewerUserName }}</a-col>
                                        <!-- <a-col :span="5">审核日期:{{dataJson.reviewerDate}}</a-col> -->
                                        <a-col :span="8">制单：{{ dataJson.createUserName }}</a-col>
                                    </a-row>
                                </div>
                            </div>
                        </a-col>
                    </a-row>

                    <div class="edit-mask" style="width:100%;height:calc(100% - 90px);" v-show="editMask">
                        <!-- 遮罩（点击修改关闭遮罩） -->
                    </div>
                </section>

            </div>
            <div class="contextmenu-box">
                <!-- 右键菜单 -->
                <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
                    <li @click="handleAdd()">新增行</li>
                    <li @click="handleDelete()">删除行</li>
                    <!--<li @click="handleCopy()">复制行</li> -->
                </ul>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>

        <!-- 辅助信息弹窗 -->
        <auxiliary ref="auxiliaryRef" :dataSource="dataSource" :currentIndexTable="currentIndexTable" @auxiliaryBack="auxiliaryBack"></auxiliary>

        <list-modal ref="listRef" :propsTitle="propsTitle" @notarize="generateCredentials"></list-modal>

        <!--整理-->
        <a-modal title="选择整理期间" :visible="collateVisible" @cancel="() => { collateVisible = false }" @ok="collateBegin">
            <div class="collate-class">
                <div class="filter">
                    <div class="filter-label" style="margin-right:10px;width:14%">期间:</div>
                    <div class="filter-control">
                        <a-select style="width:50%" placeholder="开始期间" v-model="planData.beginDate" @change="((date, dateString) => { handlerMonth(date, dateString, 1) })">
                            <a-select-option v-for="(item, index) in monthArray" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                        <!-- 至 -->
                        <!-- <a-select disabled style="width:45%" placeholder="结束月份" v-model="planData.endDate" @change="((date,dateString)=>{handlerMonth(date,dateString,2)})">
                            <a-select-option v-for="(item,index) in monthArray" :key="index" :value="item">
                                {{item}}
                            </a-select-option>
                        </a-select> -->
                    </div>
                </div>
            </div>

        </a-modal>
    </div>
</template>
<script>

const dataSource = [];
for (let i = 0; i < 10; i++) {
    let array = {}
    dataSource.push(array);
}
import editableCell from "./editTable/EditableCell";
import { mapState } from "vuex";
import { detail } from "@/api/finance/endCredentials";
import { save, examine, remove, getList, getPage, getCode, book, collate, unBook } from '@/api/finance/credentials';
import { pageList, getById } from "@/api/erp/accounting";//科目
import { pageList as categoryList } from "@/api/erp/category";
import searchGroupHeader from "@/components/PopUpLayer/searchGroupHeader";
import moment from "moment";
import { getCurrencyDetailId } from "@/api/erp/currency";
import listModal from "@/components/Finance/credentials/list/list";
import auxiliary from "@/components/Finance/credentials/auxiliary/auxiliary";
import { number2Format } from "@/utils/tool/number-formart"
import { getNowAccount } from '@/api/finance/accountingSearch';

import credentialsCommon from "@/views/finance/setting/credentialsCommon";
import credentialsRules from "@/views/finance/setting/credentialsRules";

export default {
    components: {
        editableCell,
        searchGroupHeader,
        listModal,
        auxiliary,
        credentialsCommon,
        credentialsRules
    },
    // updated () {
    //     Controlwidth("credentials_tb", 50);
    // },
    data () {
        return {
            collateVisible: false,
            planData: {
                beginDate: null,
                endDate: null,
            },
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            formLayout: "inline",
            labelCol: { span: 10 },
            wrapperCol: { span: 14 },
            grid: {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8,
                xl: 8,
                xxl: 8
            },
            editMask: true,
            //----------↑样式----------

            pagination: {
                current: 1,
                pageSize: 20,
                total: 0,
                size: 'small',
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={20}
                                size="small"
                                step={1}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                onChange: (page, pageSize) => {
                    this.pagination.current = page;
                    this.getDataList();
                }
            },
            customClick: (record, index) => ({
                on: {
                    contextmenu: (e) => {//右键事件
                        e.preventDefault();
                        this.openMenu(e);
                        console.log('右键点击的', index);
                        this.thisClickId = index;
                    },
                    click: () => {
                        this.currentIndexTable = index;
                        console.log('当前点击的行下标', this.currentIndexTable)
                    }
                },
            }),
            customClickList: (record, index) => ({
                on: {
                    click: () => {
                        this.showModel = 'order';
                        this.currentId = record.id;
                        this.getDataNewPage(5);
                    }
                }
            }),
            searchText: null,
            thisClickId: null,
            showModel: 'order',//list:列表，order:单据
            listColumns: [
                {
                    title: '日期',
                    dataIndex: 'businessDate',
                    align: 'center'
                },
                {
                    title: '凭证号',
                    dataIndex: 'code',
                    customRender: (text, record, index) => {
                        return record.classWord + '-' + text;
                    }
                },
                {
                    title: '类别',
                    dataIndex: 'vclassName'
                },
                {
                    title: '摘要',
                    dataIndex: 'remark'
                },
                {
                    title: '借方金额',
                    dataIndex: 'debitAmount',
                    align: 'right',
                    customRender: (text, record, index) => {
                        return number2Format(text);
                    }
                },
                {
                    title: '贷方金额',
                    dataIndex: 'creditAmount',
                    align: 'right',
                    customRender: (text, record, index) => {
                        return number2Format(text);
                    }
                },
                {
                    title: '制单',
                    dataIndex: 'createUserName',
                    align: 'center'
                },
                {
                    title: '审核',
                    dataIndex: 'reviewerUserName',
                    align: 'center'

                },
                {
                    title: '记账',
                    dataIndex: 'bookkeeperName',
                    align: 'center'
                },
                {
                    title: '来源系统',
                    dataIndex: '',
                    align: 'center'
                },
                {
                    title: '凭证状态',
                    dataIndex: 'status',
                    customRender: (text, record, index) => {
                        return text == 0 ? '未审核' : text == 1 ? '已审核' : text == 3 ? '已记账' : '';
                    },
                    align: 'center'
                }],
            columns: [{
                title: '序号',
                dataIndex: 'index',
                width: 30,
                align: 'center',
                customRender: (text, record, index) => {
                    return index + 1;
                }
            }, {
                title: '摘要',
                dataIndex: 'remark',
                width: 120,
                scopedSlots: { customRender: 'remark' },
                ellipsis: true,
            }, {
                title: '科目名称',
                dataIndex: 'accountingName',
                width: 120,
                scopedSlots: { customRender: 'accountingName' },
                ellipsis: true,
            }, {
                title: '辅助项',
                dataIndex: 'auxiliaryItem',
                width: 120,
                scopedSlots: { customRender: 'auxiliaryItem' },
                ellipsis: true,
            }, {
                title: <div class="money-table-title">
                    <div>借方金额</div>
                    <div class="header-box">
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">亿</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">万</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">元</div>
                        <div class="header-item">角</div>
                        <div class="header-item">分</div>
                    </div>
                </div>,
                dataIndex: 'debitAmount',
                width: 260,
                customHeaderCell: (record, rowIndex) => {		//在此处定义
                    return { style: { 'padding': '0px !important', "border-right": "1px solid #bbb" } }
                },
                customCell: (record, rowIndex) => {		//在此处定义
                    return { style: { 'padding': '0px !important', "border-right": "1px solid #bbb" } }
                },
                scopedSlots: { customRender: 'debitAmount' },
                ellipsis: true,
            }, {
                title: <div class="money-table-title">
                    <div>贷方金额</div>
                    <div class="header-box">
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">亿</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">万</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">元</div>
                        <div class="header-item">角</div>
                        <div class="header-item">分</div>
                    </div>
                </div>,
                dataIndex: 'creditAmount',
                width: 260,
                scopedSlots: { customRender: 'creditAmount' },
                ellipsis: true,
                customHeaderCell: (record, rowIndex) => {		//在此处定义
                    return { style: { 'padding': '0px !important' } }
                },
                customCell: (record, rowIndex) => {		//在此处定义
                    return { style: { 'padding': '0px !important' } }
                },
            }],
            dataSource: dataSource,
            visible: false,
            top: 0,
            left: 0,
            editColumnArraya: [],
            isRouterAlive: true,
            dataJson: {
                code: null,
                classWord: null,//凭证字
                vclassName: null,
                vclassId: null,
                businessDate: moment().format('YYYY-MM-DD'),
                attachedData: null,
                contractNo: null,
                accountingVoucherDetails: [],
            },

            voucherState: 0,    //审核状态
            invalidState: 0,    //作废状态
            voucherCode: 0,     //凭证编码  

            currentIndexTable: null,     //当前点击的行下标

            totalDebitAmount: null,  //借方金额合计
            totalCreditAmount: null,      //贷方金额合计

            currentId: null,     //当前凭证id
            currentCategoryArray: [],//当前凭证数组
            currentTitle: '凭证',
            calDirection: 1, //折算方式 1:原币*汇率=本位币 2:原币/汇率=本位币
            AccountAllData: [],//所有科目数据

            propsTitle: '',
            searchData: {
                code: null,
                status: null,
                isDelete: null,
                bookDate: null,
                bookkeeperName: null,
                bookkeeperId: null,
                reviewerUserName: null,
                reviewerUserId: null,
                reviewerDate: null,
                // businessDate: null,
                createDate: null,

                year: null,//期间年份
                beginPeriod: null,//开始期间
                endPeriod: null,//结束期间
                beginBusinessDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + "-" + '1',
                endBusinessDate: moment().format('YYYY-MM-DD'),
                beginCode: '0001',
                endCode: null
            },
            selectedKeys: [],
            selectedRows: [],
            monthArray: [],

        };
    },
    computed: {
        rowSelection () {
            return {
                columnWidth: 40,
                selectedRowKeys: this.selectedKeys,
                onChange: this.onSelectChange
            }
        },
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
            invoiceData: state => state.order.invoiceData,
        }),
    },
    created () {
        this.editColumnArray(this.columns);
        this.getDataList();
        this.getNowAccount();
        this.getcategoryList();//验证凭证类别是否   有数据
    },
    activated () {
        if (Object.keys(this.invoiceData).length > 0) {
            //获取所有科目
            this.getAccountAll();
            setTimeout(() => {
                this.editMask = false;
                let data = this.invoiceData.templateDetailsMain;
                this.dataJson.classWord = data.classWord;
                this.dataJson.vclassName = data.vclassName;
                this.dataJson.vclassId = data.vclassId;
                this.getCode();
                let dataSourceTemp = data.voucherTemplateDetailList;

                dataSourceTemp.forEach((item, index) => {
                    //accountingType 科目来源 1:单据上的科目 2:凭证模版
                    if (item.accountingType == 1) {
                        item.accountingName = this.invoiceData.accountingName;//科目名称
                        item.accountingCode = this.invoiceData.accountingCode;//科目编码
                        item.accountingId = this.invoiceData.accountingId;//科目id
                        console.log(this.invoiceData.accountingId)
                    }
                    console.log(data.accountingId)

                    //amountDirection 金额方向 1:借 2:贷
                    //amountSource 金额来源 1:金额 2:税额 3:价税合计
                    if (item.amountDirection == 1) { //借方金额
                        if (item.amountSource == 1) {
                            this.$set(item, 'debitAmount', this.invoiceData.amount);//金额
                        } else if (item.amountSource == 2) {
                            this.$set(item, 'debitAmount', this.invoiceData.tax);//税额
                        } else if (item.amountSource == 3) {
                            this.$set(item, 'debitAmount', this.invoiceData.priceTaxTotal);//价税合计
                        }
                    } else if (item.amountDirection == 2) {//贷方金额
                        if (item.amountSource == 1) {
                            this.$set(item, 'creditAmount', this.invoiceData.amount);//金额
                        } else if (item.amountSource == 2) {
                            this.$set(item, 'creditAmount', this.invoiceData.tax);//税额
                        } else if (item.amountSource == 3) {
                            this.$set(item, 'creditAmount', this.invoiceData.priceTaxTotal);//价税合计
                        }
                    }
                });
                if (dataSourceTemp.length < 10) {
                    let len = dataSourceTemp.length;
                    for (let i = 0; i < 10 - len; i++) {
                        console.log('hello', i)
                        let array = {};
                        dataSourceTemp.push(array)
                    }
                }
                this.dataSource = dataSourceTemp;
                this.reload();
                //生单过来的数据
                console.log('生单过来的数据:', this.invoiceData)
            }, 800)
        } else {
            let query = JSON.parse(localStorage.getItem("credentialsTemplate"));//获取名称为“key”的值;
            console.log(query)
            if (query && query.id && query.vtype) {
                this.generateCredentials();
            } else {
                this.getDataNewPage(4);//获取最新一条凭证
            }
        }
    },
    mounted () {
        //删除生单的数据
        setTimeout(() => {
            this.$store.commit('SET_ARR', {})
        }, 1000);
    },
    watch: {
        invoiceData (value) {
            setTimeout(() => {
                this.$store.commit('SET_ARR', {})
                return false;
            }, 1000);
        },
        visible (value) {
            console.log('this is value', value)
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        },
        voucherCode (value) {
            console.log(value);
            this.dataJson.code = value;
        },
        dataSource: {
            handler (data) {
                let a = 0;
                let b = 0;
                data.forEach(element => {
                    if (element.debitAmount || element.debitAmount == null) {
                        a += Number(element.debitAmount == null ? 0 : element.debitAmount);
                    }
                    if (element.creditAmount || element.creditAmount == null) {
                        b += Number(element.creditAmount == null ? 0 : element.creditAmount);
                    }
                });
                console.log('laimeiyoulai');
                this.totalDebitAmount = a.toFixed(2);
                this.totalCreditAmount = b.toFixed(2);
            },
            deep: true,
        },
    },
    methods: {
        moment,
        collate () {
            this.collateVisible = true;
        },
        collateBegin () {
            console.log(this.planData.beginDate)
            let request = {
                accountPeriod: Number(this.planData.beginDate.split('-')[1])
            }
            collate(request).then(res => {
                if (res.code === 200) {
                    this.$message.success('整理成功');
                    this.collateVisible = false;
                    this.getDataList();
                    this.showModal = 'list';
                }
            })
        },
        handlerMonth (e, v, t) {
            console.log(e, v, t)
            if (t == 1) {
                this.$set(this.planData, 'beginDate', e);
                this.planData.beginDate = e;
            } else {
                this.$set(this.planData, 'endDate', e);
                this.planData.endDate = e;
            }
        },
        getNowAccount () {
            //获取当前账套
            getNowAccount().then(res => {
                if (res.code === 200) {
                    console.log(res);
                    this.monthArray = [];


                    let accountMonthBegin = res.data.beginDate.split('-');
                    let accountMonthEnd = res.data.endDate.split('-');

                    let year = accountMonthBegin[0];
                    this.searchData.year = year;
                    let month = parseInt(accountMonthBegin[1]);

                    let monthEnd = accountMonthEnd[1];
                    console.log(year, month, monthEnd);

                    for (let i = month; i <= monthEnd; i++) {
                        let m = year + '-' + (i < 10 ? '0' + i : i);
                        this.monthArray.push(m);
                    }

                    this.searchData.beginPeriod = this.monthArray[0];
                    this.searchData.endPeriod = this.monthArray[this.monthArray.length - 1];

                    this.planData.beginDate = this.monthArray[0];
                    this.planData.endDate = this.monthArray[this.monthArray.length - 1];

                }
            })
        },
        onSelectChange (keys, rows) {
            console.log(keys, rows)
            //勾选数据
            this.selectedKeys = keys;
            this.selectedRows = rows;
        },
        generateCredentials () {
            let query = JSON.parse(localStorage.getItem("credentialsTemplate"));//获取名称为“key”的值;
            //生成凭证过来的数据
            detail({ id: query.id, vtype: query.vtype }).then(res => {
                if (res.code === 200) {
                    this.showModel = 'order';
                    this.editMask = false;
                    this.voucherState = 0;
                    this.currentId = null;

                    this.invalidState = 0;
                    res.data.sourceId = res.data.id;
                    res.data.id = null;

                    this.dataJson = {
                        vclassName: res.data.vclassName,
                        vclassId: res.data.vclassId,
                        businessDate: moment().format('YYYY-MM-DD'),
                        accountingVoucherDetails: [],
                        classWord: res.data.classWord,
                    };

                    this.dataSource = res.data.orderDetailList;
                    let length = res.data.orderDetailList.length;

                    if (length > 0) {
                        res.data.orderDetailList.forEach(item => {
                            item.id = null;
                        })
                    }
                    if (length < 10) {
                        for (let i = 0; i < 10 - length; i++) {
                            let array = {};
                            this.dataSource.push(array)
                        }
                    }
                    console.log(this.dataSource)
                    this.getCode();
                    this.reload();
                }
            })
            this.$refs.listRef.cancel();
        },
        reload () {
            //强制刷新表格
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        },
        getAccountAll () {
            //获取所有科目
            let postData = {
                current: 1,
                size: -1
            }
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;

                    let map = new Map();
                    records.forEach(item => {
                        map.set(item.id, item);
                    });
                    this.AccountAllData = map;
                }
            }).catch(error => { });
        },
        getAccountById (id) {
            //根据科目id获取科目详情
            let postData = {
                id: id,
            }
            getById(postData).then(response => {
                if (response.code === 200) {
                    this.nowAccountData = response.data;//当前点击行的科目详情

                    this.isAuxaccCustomer = this.nowAccountData.isAuxaccCustomer;      //客户往来
                    this.isAuxaccDepartment = this.nowAccountData.isAuxaccDepartment; //部门
                    this.isAuxaccPerson = this.nowAccountData.isAuxaccPerson;          //个人往来
                    this.isAuxaccProject = this.nowAccountData.isAuxaccProject;        //项目
                    this.isAuxaccSupplier = this.nowAccountData.isAuxaccSupplier;      //供应商往来
                    this.isBank = (this.nowAccountData.isBank || this.nowAccountData.isCash || this.nowAccountData.isCashEquivalents) ? true : false;//现金银行
                    this.isQuantity = this.nowAccountData.isQuantity;   //是否数量核算
                    this.isExchange = this.nowAccountData.isExchange;   //是否外币核算

                    this.dataSource.forEach((item, index) => {
                        if (index == this.currentIndexTable) {
                            console.log('当前行数据：', item);
                            // item.isAuxaccCustomer = item.crmId || item.crmId == 0 ? true : false;      //客户往来
                            // item.isAuxaccDepartment = item.officeId || item.officeId == 0 ? true : false;  //部门
                            // item.isAuxaccPerson = item.userId || item.userId == 0 ? true : false;          //个人往来
                            // item.isAuxaccProject = item.projectId || item.projectId == 0 ? true : false;        //项目
                            // item.isAuxaccSupplier = item.vendorId || item.vendorId == 0 ? true : false;      //供应商往来
                            // item.isBank = item.settleId || item.settleId == 0 ? true : false;//现金银行
                            // item.isQuantity = item.unitId || item.unitId == 0 ? true : false;   //是否数量核算
                            // item.isExchange = item.currencyId || item.currencyId == 0 ? true : false;//是否外币核算



                            if (this.isBank || this.isAuxaccCustomer || this.isAuxaccDepartment || this.isAuxaccPerson || this.isAuxaccProject || this.isAuxaccSupplier || this.isQuantity || this.isExchange) {
                                this.auxiliaryModal = true;
                            }

                            this.settleName = item.settleName;
                            this.settleId = item.settleId;
                            this.bankAccount = item.bankAccount;   //银行账号
                            this.bankId = item.bankId;        //银行id
                            this.bankName = item.bankName;      //银行名称
                            this.officeName = item.officeName;
                            this.officeId = item.officeId;
                            this.userName = item.userName;
                            this.userId = item.userId;
                            this.crmName = item.crmName;
                            this.crmId = item.crmId;
                            this.vendorName = item.vendorName;
                            this.vendorId = item.vendorId;
                            this.projectName = item.projectName;
                            this.projectId = item.projectId;
                            this.billDate = item.billDate;
                            this.billNo = item.billNo;

                            this.currencyAmount = item.currencyAmount;   //原币金额
                            this.currencyId = item.currencyId;       //币种id
                            this.currencyName = item.currencyName;    //币种名称
                            this.exchangeRate = item.exchangeRate;    //汇率
                            this.debitAmountType = item.debitAmount > 0 ? 1 : 2;     //借贷方向
                            this.quantity = item.quantity;        //数量
                            this.price = item.price;           //单价
                            this.unitId = item.unitId;          //计量单位id
                            this.unitName = item.unitName;        //计量单位名称
                        }
                    });

                    //获取币种详情（折算方式和汇率）
                    if (this.currencyId) {
                        this.getCurrencyDetailId(this.currencyId);
                    }



                }
            }).catch(error => { });
        },
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        async newPage () {
            this.showModel = 'order';
            this.editMask = false;
            this.voucherState = 0;
            this.invalidState = 0;
            this.currentId = null;
            this.dataJson = {
                vclassName: null,
                vclassId: null,
                businessDate: moment().format('YYYY-MM-DD'),
                accountingVoucherDetails: [],
            };

            this.dataSource = [];
            for (let i = 0; i < 10; i++) {
                let array = {}
                this.dataSource.push(array);
            }
            this.reload();
            await this.getCode();

            if (this.currentCategoryArray) {
                console.log(this.currentCategoryArray)
                this.currentTitle = this.currentCategoryArray[0].className;
                this.dataJson.vclassName = this.currentCategoryArray[0].className;
                this.dataJson.vclassId = this.currentCategoryArray[0].id;
                this.dataJson.code = this.voucherCode;
                this.$set(this.dataJson, 'classWord', this.currentCategoryArray[0].classWord);
            }

        },
        async getCode () {
            //获取编码
            await getCode({ businessDate: this.dataJson.businessDate }).then(res => {
                if (res.code === 200) {
                    this.voucherCode = res.message;
                    // this.$set(this.dataJson, 'code', this.dataJson.classWord + '字第' + res.message + '号');
                    this.$set(this.dataJson, 'code', res.message);
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        choiceProof (type) {
            if (type == 1) {
                //常用凭证
                this.propsTitle = "常用凭证";
                this.$refs.listRef.show(1);
            } else if (type == 2) {
                //规则凭证
                this.propsTitle = "规则凭证";
                this.$refs.listRef.show(2);
            }
        },
        onChangeBusinessDate (e, v) {
            //业务时间改变
            this.dataJson.businessDate = v;
            this.getCode();
        },
        openMenu (e) {
            //显示右键菜单
            var x = e.pageX - 250;
            var y = e.pageY - 40;
            this.top = y;
            this.left = x;
            this.visible = true;
        },
        closeMenu () {
            //隐藏右键菜单
            this.visible = false;
        },
        onCellChange (indexTable, dataIndex, value) {
            console.log('进入了---------第一次选择科目时的弹窗');
            //当前点击的行下标
            this.currentIndexTable = indexTable;
            console.log('当前点击的数据：', indexTable, dataIndex, value);

            const dataSource = [...this.dataSource];
            const target = dataSource.find((item, index) => index === indexTable);
            if (dataIndex == 'accountingName') {
                if (value) {
                    target['accountingName'] = value.code + ' ' + value.treeNames.split('/').join('_');
                    target['accountingId'] = value.id;
                    target['accountingCode'] = value.code;

                    target['unitId'] = value.unitId;            //计量单位id
                    target['unitName'] = value.unitName;        //计量单位名称
                    target['currencyId'] = value.defaultCurrencyId;            //币种id
                    target['currencyName'] = value.defaultCurrencyName;        //币种名称

                    if (value.isAuxaccCustomer || value.isAuxaccDepartment || value.isAuxaccPerson || value.isAuxaccProject || value.isAuxaccSupplier || value.isBank || value.isCash || value.isCashEquivalents || value.isQuantity || value.isExchange) {

                        this.$refs.auxiliaryRef.show(value.id);

                        // if (this.currencyId) {
                        //     this.getCurrencyDetailId(this.currencyId);
                        // }
                    }

                } else {
                    target['accountingName'] = null;
                    target['accountingId'] = null;
                }


            } else if (dataIndex == 'debitAmount') {
                //借方金额
                console.log(value)
                target['debitAmount'] = value;
                let valNum = _.clone(Math.abs(Number(value)).toFixed(2));
                if (valNum && valNum != 0) {
                    let v = valNum.toString().replace('.', "");
                    target['moneyDebitAmount'] = v.split("");
                    let length = 13 - target['moneyDebitAmount'].length;
                    for (let i = 0; i < length; i++) {
                        target['moneyDebitAmount'].unshift("");
                    }
                    console.log('处理过后：', target['moneyDebitAmount'])

                    target['creditAmount'] = null;
                    target['moneyCreditAmount'] = [];
                } else {
                    target['debitAmount'] = null;
                    target['moneyDebitAmount'] = [];
                }
            } else if (dataIndex == 'creditAmount') {
                //贷方金额
                target['creditAmount'] = value;
                let valNum = _.clone(Math.abs(Number(value)).toFixed(2));
                if (valNum && valNum != 0) {
                    let v = valNum.toString().replace('.', "");
                    target['moneyCreditAmount'] = v.split("");
                    let length = 13 - target['moneyCreditAmount'].length;
                    for (let i = 0; i < length; i++) {
                        target['moneyCreditAmount'].unshift("");
                    }
                    target['debitAmount'] = null;
                    target['moneyDebitAmount'] = [];
                } else {
                    target['creditAmount'] = null;
                    target['moneyCreditAmount'] = [];
                }
            } else {
                target[dataIndex] = value;
            }

            this.$nextTick(() => {
                this.dataSource = dataSource;
                this.reload();
            })


        },
        showModalAuxiliary (id) {
            console.log('进入了---------修改的弹窗');
            this.$refs.auxiliaryRef.show(id);

        },
        getCurrencyDetailId (id) {
            getCurrencyDetailId({ id: id }).then(res => {
                if (res.code === 200) {
                    this.calDirection = res.data.calDirection;
                }
            })
        },
        handleAdd () {
            //新增数据
            const { count, dataSource } = this;
            const newData = {};
            this.$nextTick(() => {
                this.dataSource.splice(this.dataSource.length, 0, newData);
            })
            console.log('新增行：', this.dataSource)
        },
        handleDelete () {
            //删除整行
            let _this = this;
            let numberId = this.thisClickId;
            console.log(numberId);
            this.$confirm({
                title: "确认",
                content: (
                    <span>
                        您确定要{<span style="color:red;">删除</span>}该记录吗？
                    </span>
                ),
                onOk () {
                    let dataSource = [..._this.dataSource];
                    console.log(_this.dataSource.length);
                    if (dataSource.length - 1 > 9) {
                        //大于规定行数(删除)
                        _this.dataSource = dataSource.filter((item, index) => index !== numberId);
                    } else {
                        //小于规定行数(清空)
                        // for (let i = 0; i < dataSource.length; i++) {
                        //     if (i === numberId) {
                        //         for (const key in dataSource[i]) {
                        //             if (key != 'number') {
                        //                 dataSource[i][key] = ""
                        //             }
                        //         }
                        //     }
                        // }
                        _this.dataSource = dataSource.filter((item, index) => index !== numberId);
                        for (let i = 0; i < 10 - _this.dataSource.length; i++) {
                            _this.dataSource.push({})
                        }
                    }
                    _this.reload();
                },
                onCancel () { },
            });
        },
        searchBackData (record) {
            console.log(record);
            if (record) {
                if (record.name) {
                    this.getCode();
                    // if (this.voucherCode != 0) {
                    console.log(record.classWord)
                    this.$set(this.dataJson, 'classWord', record.classWord);
                    this.currentTitle = record.className;
                    // this.dataJson.classWord = record.classWord;
                    this.dataJson.vclassName = record.name;
                    this.dataJson.vclassId = record.id;
                    // }
                } else {
                    this.dataJson.vclassName = null;
                    this.dataJson.vclassId = null;
                }

                if (record.codesName == 'employees') {
                    if (record.name) {
                        this.searchData.reviewerUserName = record.name;
                        this.searchData.reviewerUserId = record.id;
                    } else {
                        this.searchData.reviewerUserName = null;
                        this.searchData.reviewerUserId = null;
                    }
                }
            }

        },
        //获取可编辑的列名
        editColumnArray (column) {
            let editcloumn = [];
            column.forEach((item, index) => {
                if (item.children) {
                    item.children.forEach((res) => {
                        editcloumn.push({ dataIndex: res.dataIndex, slot: res.scopedSlots.customRender });
                    })
                }
                // if (item.scopedSlots) {
                //     editcloumn.push({ dataIndex: item.dataIndex, slot: item.scopedSlots.customRender });
                // } else {
                editcloumn.push(item.dataIndex);
                // }
            });
            this.editColumnArraya = editcloumn;
        },
        searchGroup (type) {
            if (type == 'credentialsSearch') {
                this.$refs.credentialsSearch.showModal();
            } else if (type == 'employees') {
                this.$refs.reviewerRef.showModal();
            }
        },

        //获取凭证
        getcategoryList () {
            categoryList().then(response => {
                if (response.code === 200) {
                    if (response.data.length < 1) {
                        let _this = this;
                        this.$confirm({
                            title: '提示',
                            content: '没有凭证类别，请配置！',
                            okText: '马上去配置',
                            keyboard: false,
                            closable: false,
                            onOk () {
                                console.log("准备进入地区配置页面。。。",)
                                _this.$router.push("/finance/setting/FinanceCategory");
                                // window.location.replace("/system/area/list");
                            },
                            onCancel () {

                            },
                        });
                    } else {
                        this.currentCategoryArray = response.data;
                    }
                }
            }).catch(error => { });
        },
        handlerSubmit () {
            //提交数据
            if (this.dataJson.classWord == null || this.dataJson.classWord == '') {
                this.$message.warning('凭证字必须选择');
                return;
            }

            if (this.dataJson.code == null || this.dataJson.code == '') {
                this.$message.warning('凭证编号必须填写');
                return;
            }

            // if (this.dataJson.vclassId == null || this.dataJson.vclassId == '') {
            //     this.$message.warning('凭证类别必须填写');
            //     return;
            // }

            if (this.totalDebitAmount != this.totalCreditAmount) {
                this.$message.warning('借方金额和贷方金额必须相等');
                return;
            }

            if (this.totalDebitAmount == 0 || this.totalCreditAmount == 0) {
                this.$message.warning('不允许存在借方金额和贷方金额都未录入或录入金额为0的分录行！');
                return;
            }

            this.dataJson.accountingVoucherDetails = this.dataSource.filter(e => { return e.accountingId });//表明细
            if (this.dataJson.accountingVoucherDetails.length < 1) {
                this.$message.warning('请输入明细表');
                return;
            }



            //判断辅助项
            let vdetails = this.dataJson.accountingVoucherDetails;


            console.log(vdetails);

            for (let i = 0; i < vdetails.length; i++) {
                let item = vdetails[i];
                if (item.remark == '' || item.remark == null) {
                    this.$message.warning('摘要必须填写');
                    return
                }

                if (item.officeId == 0 || item.projectId == 0 || item.settleId == 0 || item.vendorId == 0 || item.userId == 0 || item.crmId == 0) {
                    if (item.auxiliaryItem == '' || !item.auxiliaryItem || item.auxiliaryItem == null) {
                        this.$message.warning(`第${i + 1}行: 辅助项必须填写完整!`);
                        return;
                    }
                }
                if ((!item.debitAmount || item.debitAmount == 0) && (!item.creditAmount || item.creditAmount == 0)) {
                    this.$message.warning(`第${i + 1}行: 请输入借贷金额!`);
                    return;
                }
            }
            let requestData = JSON.parse(JSON.stringify(this.dataJson));
            requestData.code = this.dataJson.code;

            if (this.currentId) {
                requestData.id = this.currentId;
            }
            console.log('提交的数据：', requestData);
            save(requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.editMask = true;
                    this.currentId = res.data;//当前凭证id
                    this.voucherState = 0;
                    this.invalidState = 0;

                    this.getDataList();
                    this.getDataNewPage(5);
                } else {
                    // this.$message.warning(res.message);
                }
            }).catch(error => {

            })
        },
        getDataList (t) {
            //获取列表

            let data = {
                code: this.searchText,
                current: this.pagination.current,
                size: this.pagination.pageSize,
            };

            if (t == 'search') {
                this.pagination.current = 1;

                data = Object.assign(data, this.searchData);
                data.beginPeriod = this.searchData.beginPeriod.split('-')[1];
                data.endPeriod = this.searchData.endPeriod.split('-')[1];
            }
            getList(data).then(res => {
                if (res.code === 200) {
                    const { total, current, size } = res.data;
                    this.pagination.total = res.data.total;
                    let records = res.data.records.map(v => {
                        return { ...v, key: v.id }
                    })
                    this.listDataSource = records;
                    this.$forceUpdate();
                    if (!t) {
                        if (records.length == 0) {
                            this.newPage();
                        }
                    }
                }
            })
        },
        auxiliaryBack (data) {
            this.dataSource = data;
            this.reload();
        },
        getDataNewPage (type) {
            //翻页||获取最新一条||获取当前页type==5
            let requestData = {
                actionType: type,
                currentId: this.currentId,
            }
            getPage(requestData).then(res => {
                if (res.code === 200) {
                    if (type == 1 && res.data == null) {
                        this.$message.warning('已经是首页了', 2);
                        return;
                    }
                    if (type == 2 && res.data == null) {
                        this.$message.warning('已经是尾页了', 2);
                        return;
                    }
                    if (res.data) {
                        this.editMask = true;
                        this.currentId = res.data.id;
                        this.voucherState = res.data.status;
                        this.currentTitle = res.data.vclassName;
                        this.invalidState = res.data.isDelete;
                        this.dataJson = res.data;
                        this.voucherCode = res.data.code;
                        this.dataSource = res.data.accountingVoucherDetails;
                        let length = res.data.accountingVoucherDetails.length;

                        this.dataSource.forEach(item => {
                            if (item.debitAmount != null && item.debitAmount != 0) {
                                let value = Math.abs(Number(item.debitAmount)).toFixed(2);
                                let v = value.toString().replace('.', "");
                                item.moneyDebitAmount = v.split("");
                                let length = 13 - item.moneyDebitAmount.length;
                                for (let i = 0; i < length; i++) {
                                    item.moneyDebitAmount.unshift("");
                                }
                                console.log('处理过后：', item.moneyDebitAmount)
                            }

                            if (item.creditAmount != null && item.creditAmount != 0) {
                                let value = Math.abs(Number(item.creditAmount)).toFixed(2);
                                let v = value.toString().replace('.', "");
                                item.moneyCreditAmount = v.split("");
                                let length = 13 - item.moneyCreditAmount.length;
                                for (let i = 0; i < length; i++) {
                                    item.moneyCreditAmount.unshift("");
                                }
                            }
                        })

                        if (length < 10) {
                            for (let i = 0; i < 10 - length; i++) {
                                let array = {};
                                this.dataSource.push(array)
                            }
                        }

                        console.log(this.dataSource)
                        this.reload();
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            }).catch(res => {

            })
        },
        handleRemove (type) {
            //type == 0 取消作废
            //type == 1 作废
            let that = this;
            this.$confirm({
                title: type == 1 ? `是否确认删除该数据？` : `是否确认恢复该数据？`,
                content: "",
                onOk () {
                    remove({ id: that.currentId, status: type }).then(res => {
                        if (res.code == 200) {
                            if (type == 1) {
                                that.$message.success("删除成功");
                                that.invalidState = 1;
                            } else {
                                that.$message.success("删除成功");
                                that.invalidState = 0;
                            }

                            that.selectedKeys = [];
                            that.selectedRows = [];
                            that.getDataList();
                            that.getDataNewPage(4);
                        } else {
                            // that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        //审核
        auditClick (type) {
            let requestData = {
                ids: [this.currentId],
                status: type
            }
            examine(requestData).then((response) => {
                if (response.code === 200) {
                    if (type == 1) {
                        this.$message.success('审核成功');
                        this.voucherState = 1;
                    }
                    if (type == 0) {
                        this.$message.success('弃审成功');
                        this.voucherState = 0;
                    }
                    this.getDataList();
                    this.getDataNewPage(5);
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        //审核
        auditClickList (type) {
            if (this.selectedKeys.length < 1) {
                this.$message.warning('请至少勾选一条数据');
                return;
            }
            let requestData = {
                ids: this.selectedKeys,
                status: type
            }
            examine(requestData).then((response) => {
                if (response.code === 200) {

                    let that = this;
                    let success = `成功条数：${response.data.sCount}`;
                    let error = `失败条数：${response.data.fCount}`;
                    let msg = [];
                    for (let i = 0; i < response.data.result.length; i++) {
                        msg.push(<div>{response.data.result[i]}</div>);
                    }
                    let content = <div>
                        <span style="font-size:16px;color:green">{success}</span><br />
                        <span style="font-size:16px;color:red">{error}</span><br />
                        <div style="max-height:180px;overflow-y:auto;">{msg}</div>
                    </div>;
                    this.$confirm({
                        icon: () => { return <a-icon type="exclamation-circle" /> },
                        title: '操作结果',
                        content: content,
                        okText: '确定',
                        cancelText: '关闭',
                        onOk () {
                            that.getDataList();
                            that.getDataNewPage(5);
                        },
                        onCancel () {
                            that.getDataList();
                            that.getDataNewPage(5);
                        },
                    });

                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        unChargeClick (type) {
            let requestData = [];
            //记账
            if (type == 'list') {
                requestData = this.selectedKeys;
                if (this.selectedKeys.length < 1) {
                    this.$message.warning('请至少勾选一条数据');
                    return;
                }
            } else {
                requestData = [this.currentId];
            }

            unBook(requestData).then(response => {
                if (response.code === 200) {

                    let that = this;
                    let success = `成功条数：${response.data.sCount}`;
                    let error = `失败条数：${response.data.fCount}`;
                    let msg = [];
                    for (let i = 0; i < response.data.result.length; i++) {
                        msg.push(<div>{response.data.result[i]}</div>);
                    }
                    let content = <div>
                        <span style="font-size:16px;color:green">{success}</span><br />
                        <span style="font-size:16px;color:red">{error}</span><br />
                        <div style="max-height:180px;overflow-y:auto;">{msg}</div>
                    </div>;
                    this.$confirm({
                        icon: () => { return <a-icon type="exclamation-circle" /> },
                        title: '操作结果',
                        content: content,
                        okText: '确定',
                        cancelText: '关闭',
                        footer: null,
                        onOk () {
                            that.getDataList();
                            that.getDataNewPage(5);
                            that.selectedKeys = [];
                            that.selectedRows = [];
                        },
                        onCancel () {
                            that.getDataList();
                            that.getDataNewPage(5);
                            that.selectedKeys = [];
                            that.selectedRows = [];
                        },
                    });
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        chargeClick (type) {
            let requestData = [];
            //记账
            if (type == 'list') {
                requestData = this.selectedKeys;
                if (this.selectedKeys.length < 1) {
                    this.$message.warning('请至少勾选一条数据');
                    return;
                }
            } else {
                requestData = [this.currentId];
            }

            book(requestData).then(response => {
                if (response.code === 200) {

                    let that = this;
                    let success = `成功条数：${response.data.sCount}`;
                    let error = `失败条数：${response.data.fCount}`;
                    let msg = [];
                    for (let i = 0; i < response.data.result.length; i++) {
                        msg.push(<div>{response.data.result[i]}</div>);
                    }
                    let content = <div>
                        <span style="font-size:16px;color:green">{success}</span><br />
                        <span style="font-size:16px;color:red">{error}</span><br />
                        <div style="max-height:180px;overflow-y:auto;">{msg}</div>
                    </div>;
                    this.$confirm({
                        icon: () => { return <a-icon type="exclamation-circle" /> },
                        title: '操作结果',
                        content: content,
                        okText: '确定',
                        cancelText: '关闭',
                        footer: null,
                        onOk () {
                            that.getDataList();
                            that.getDataNewPage(5);
                            that.selectedKeys = [];
                            that.selectedRows = [];
                        },
                        onCancel () {
                            that.getDataList();
                            that.getDataNewPage(5);
                            that.selectedKeys = [];
                            that.selectedRows = [];
                        },
                    });
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        //修改
        handleEdit () {
            this.editMask = false;
        },
        //改变分页大小
        changePageSize (e) {
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            const { pagination } = this;

            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });
            this.getDataList();
        },
        syncFun () {
            //刷新
            this.getDataList();
            this.getDataNewPage(5);
            this.getcategoryList();
        },
        isInteger (obj) {
            return typeof obj === 'number' && obj % 1 === 0
        },
        inputNum () {
            let value = Number(this.dataJson.attachedData);
            console.log(isNaN(value), typeof value, value, this.isInteger(value));
            if (isNaN(value) != false && this.isInteger(value) == false) {
                this.dataJson.attachedData = null
            }

            if (isNaN(value) == false && this.isInteger(value) == false) {
                this.dataJson.attachedData = null
            }
            // if (value.indexOf('.') > 0) {
            //     this.dataJson.attachedData = value.slice(0, value.indexOf('.') + 3)
            // }

        },
    },

};
</script>
<style lang="less" scoped>
    @import '~@/style/purchase/voucher.less';

    table {
        table-layout: fixed;
    }

    .audit-status {
        right: 10px;
        top: 0px;
    }

    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        min-height: 350px;

        .date-tp {
            text-align: center;
            margin-bottom: 10px;
        }

        .footer-tp-c {
            text-align: left;
            margin-top: 10px;
            padding-left: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
            margin-left: -100px;
        }

        .subsidiary {
            border: 1px solid #cacaca;
            text-align: center;
            display: flex;

            .sub-title {
                flex: 0 0 26px;
                padding-top: 8px;
                border-right: 1px solid #cacaca;
            }

            .sub-content {
                flex: 1;
                text-align: left;

                .sub-list {
                    border-bottom: 1px solid #cacaca;
                    line-height: 32px;

                    .ant-col {
                        padding-left: 20px;
                    }
                }

                .sub-list:last-child {
                    border-bottom: none;
                }
            }
        }

        .total-box-creadentials {
            margin-top: 2px;
            display: flex;
            line-height: 32px;
            text-align: center;
            background: #fff7e7;
            font-size: 14px;

            .total-title {
                padding-left: 10px;
                box-sizing: border-box;
                text-align: left;
                width: 65% !important;
                box-sizing: content-box;
            }

            .total-borrow {
                width: 19% !important;
                font-weight: bold;
                font-size: 14px;
                text-align: center;

                .total-item {
                    flex: 1;
                    height: 100%;
                    min-width: 20px;
                }
            }

            .total-loan {
                width: 19% !important;
                font-weight: bold;
                font-size: 14px;
                text-align: center;
            }
        }

        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }

        .bills-box-header {
            display: flex;
            justify-content: space-between;

            .filter {
                display: table;
                width: 246px;
                margin-bottom: 5px;

                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
            }
        }

        .ant-input-group-addon {
            border: 0px;
        }
    }

    .atable-edit {
        .ant-table-tbody > tr > td {
            padding: 0px 2px !important;
        }
    }

    .collate-class {
        .filter {
            display: table;
            width: 280px;
            margin-bottom: 5px;

            .filter-label {
                display: table-cell;
                font-weight: normal;
                max-width: 160px;
                line-height: 32px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .filter-control {
                display: table-cell;
                width: 100%;
                line-height: 32px;
            }
        }
    }

    //辅助弹窗
    .auxiliary-wapper {
        color: #222;

        .condition {
            padding: 0 10px;
            margin-bottom: 10px;
            overflow-y: auto;

            .filter {
                display: table;
                margin-top: 10px;

                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .filter-control {
                    display: table-cell;
                    width: 100%;
                }

                .ant-select-selection--single {
                    height: auto;
                }

                .ant-input-number {
                    width: auto;
                }

                .ant-input,
                .ant-input-number,
                .ant-select-selection {
                    border-radius: 0;
                    border: none;
                    border-bottom: 1px solid #ccc;
                }

                .ant-input-number,
                .ant-select-selection,
                .ant-calendar-picker,
                .ant-calendar-picker-input,
                .ant-input:focus {
                    box-shadow: none;
                }

                .ant-input-number-handler-wrap {
                    display: none;
                }

                .ant-input-group-addon {
                    border: 0px;
                }
            }
        }
    }

    .money-table-title {
        .header-box {
            width: 100%;
            display: flex;
            border-top: 1px solid #cacaca;

            .header-item {
                flex: 1;
                min-width: 20px;
                border-right: 1px solid #cacaca;
            }

            .header-item:nth-child(2),
            .header-item:nth-child(5),
            .header-item:nth-child(8) {
                border-right: 1px solid #a3d9f8;
            }

            .header-item:nth-child(11) {
                border-right: 1px solid #eb9998;
            }

            .header-item:last-child {
                border-right: 0px solid #cacaca;
            }
        }
    }

    /deep/.ant-table-thead > tr > th .ant-table-header-column {
        display: block !important;
    }
</style>